<!-- 订单详情 -->
<template>
	<view class="page_box">
		<view class="head_box"></view>
		<view class="content_box">
			<!-- 订单状态 -->
			<view class="detail-head" style="height:120rpx">
				<view class="state-box x-f">
					<image class="state-img" :src="$IMG_URL + '/order_state1.png'" mode=""></image>
					<text>{{ orderDetail.status_desc }}</text>
				</view>
			</view>

			
			<view class="detail-goods">
				<!-- 订单信息 -->
				<view class="order-list" v-for="order in orderDetail.item" :key="order.id">
					<view class="order-card">
						<t-mini-card
							:type="order.type"
							:title="order.goods_title"
							:describe="order.goods_sku_text"
							:is_next_day_delivery="order.is_next_day_delivery"
							:price="order.goods_price"
							:number="order.goods_num"
							:image="order.goods_image"
							@click="$Router.push({ path: '/pages/goods/detail/index', query: { id: order.goods_id } })"
						>
							<template #cardBottom>
								<view class="order-price-wrap x-f ">
									<text class="order-price">{{ order.goods_price || 0 }}</text>
									<button class="cu-btn status-btn" v-if="order.status_name">{{ order.status_name }}</button>
								</view>
							</template>
						</t-mini-card>
					</view>
				</view>
			</view>
<!-- <view class="notice-box" v-if="orderDetail.id">
				<view class="notice-title x-f ml20">订单信息</view> -->
			<!-- 订单类型 -->
			<view class="notice-box ">
				<!-- <text class="notice-title x-f ml20">订单类型</text> -->
				<view class="notice-title x-f ml20 mr30"> 
						<text class="title">订单类型</text>
						<text class="detail">{{ orderDetail.order_type }}</text>
				</view>
			</view>
			<!-- 收货信息 (仅配送订单显示) -->
			<view class="consignee-wrap mb20" v-if="orderDetail.order_type === '配送'">
				<view class="consignee-title pa20">收货信息</view>
				<view class="consignee-content">
					<view class="content-item x-f">
						<view class="item-name">收货人：</view>
						<view class="item-value">{{ orderDetail.consignee }}</view>
					</view>
					<view class="content-item x-f">
						<view class="item-name">手机号：</view>
						<view class="item-value">{{ orderDetail.phone }}</view>
					</view>
					<view class="content-item x-f">
						<view class="item-name">收货地址：</view>
						<view class="item-value">{{ orderDetail.user_address }}</view>
					</view>
				</view>
			</view>

			<!-- 到店信息 (仅自提订单显示) -->
			<view class="storeInfo-wrap mb20" v-if="orderDetail.order_type === '自提' && orderDetail.store && orderDetail.store.id">
				<view class="storeInfo-title pa20">到店信息</view>
				<view class="qr-code-box y-f" v-if="orderDetail.verify.length">
					<view class="code-img-wrap my20"><image class="qr-code-img" :src="allqrcodepath" mode=""></image></view>
					<view class="qr-code-tip">为保障您的权益，未到店消费前请不要将提货码提供给商家</view>
				</view>
				<view class="storeInfo-box">
					<view class="store-name">{{ orderDetail.store.name }}</view>
					<view class="x-f">
						<view class="store-address">{{ orderDetail.store.address }}</view>
						<view class="store-line"></view>
						<view class="store-serve x-ac">
							<button class="cu-btn" @tap="openLocation"><text class="iconfont icon-dingwei"></text></button>
							<button class="cu-btn" @tap="$tools.callPhone(orderDetail.store.phone)"><text class="iconfont icon-tianchongxing-"></text></button>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="notice-box" v-if="orderDetail.id">
				<view class="notice-title x-f ml20">订单信息</view>
				<view class="notice-box__content">
					<view class="notice-item--center x-f">
						<text class="title">订单编号：</text>
						<text class="detail">{{ orderDetail.order_sn }}</text>
						<button class="cu-btn copy-btn" @tap="onCopy(orderDetail.order_sn)">复制</button>
					</view>
					<view class="notice-item x-f">
						<text class="title">下单时间：</text>
						<text class="detail">{{ orderDetail.createtime }}</text>
					</view>
					<view class="notice-item x-f" v-if="orderDetail.status > 0">
						<text class="title">支付方式：</text>
						<text class="detail">{{ payType[orderDetail.pay_type] }}</text>
					</view>
					<view class="notice-item x-f" v-if="orderDetail.status > 0">
						<text class="title">支付时间：</text>
						<text class="detail">{{ orderDetail.paytime }}</text>
					</view>
				</view>
			</view>

			<!-- 价格信息 -->
			<view class="order-price-box" v-if="orderDetail.id">
				<view class="notice-item x-bc">
					<text class="title">商品总额</text>
					<text class="detail">￥{{ orderDetail.goods_amount }}</text>
				</view>
				<view class="notice-item x-bc">
					<text class="title">优惠金额</text>
					<text class="detail">-￥{{ orderDetail.discount_fee }}</text>
				</view>
				<view class="notice-item x-bc" v-if="orderDetail.order_type === '配送'">
					<text class="title">配送费</text>
					<text class="detail">+￥{{ orderDetail.order_freight }}</text>
				</view>
				<view class="notice-item x-bc" v-if="orderDetail.score_fee">
					<text class="title">积分</text>
					<text class="detail">-{{ orderDetail.score_fee }}积分</text>
				</view>
				<view class="notice-item all-rpice-item x-f" style="width: 100%;">
					<text class="title">{{ orderDetail.status <= 0 ? '需付款' : '实付款' }}：</text>
					<text class="detail all-price">￥{{ orderDetail.total_fee }}</text>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
import _app from '@/common/utils/QS-SharePoster/app.js';
import { getSharePoster } from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
export default {
	components: {},
	data() {
		return {
			poster: {},
			canvasId: 'qrcode_img',
			qrcode: '',
			allqrcodepath: '', //核销总码
			time: 0,
			tools: this.$tools,
			orderDetail: {},
			orderStatus: {
				'-2': '已关闭',
				'-1': '已取消',
				'0': '未付款',
				'1': '已付款',
				'2': '已完成'
			},
			payType: {
				wallet: '余额支付',
				wechat: '微信支付',
				alipay: '支付宝支付',
				iospay: 'ApplePay'
			},
			expressType: {
				express: '物流快递',
				selfetch: '到店/自提',
				store: '商家配送',
				autosend: '自动发货'
			}
		};
	},
	onShow() {
		this.getOrderDetail();
	},
	onLoad() {},
	computed: {
		allNum() {
			if (this.orderDetail.item) {
				let items = this.orderDetail.item;
				let allPrice = 0;
				items.forEach(p => {
					allPrice += p.goods_num;
				});
				return allPrice;
			}
		}
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},

		// 打开地址导航
		openLocation() {
			uni.openLocation({
				latitude: Number(this.orderDetail.store.latitude),
				longitude: Number(this.orderDetail.store.longitude),
				name: this.orderDetail.store.name,
				address: this.orderDetail.store.address,
				success: function() {
					console.log('success');
				},
				fail: err => {
					console.log(err);
				}
			});
		},

		// 绘制二维码
		async shareFc() {
			let that = this;
			try {
				console.log('准备生成:' + new Date());
				const d = await getSharePoster({
					_this: this, //若在组件中使用 必传
					posterCanvasId: this.canvasId, //canvasId
					delayTimeScale: 20, //延时系数
					drawDelayTime: 500, //draw延时时间
					background: {
						width: 100,
						height: 100,
						backgroundColor: '#fff'
					},
					drawArray: ({ bgObj, type, bgScale }) => {
						return new Promise((rs, rj) => {
							rs([
								{
									type: 'qrcode',
									text: this.qrcode,
									size: bgObj.width,
									dx: 0,
									dy: 0,
									correctLevel: 1
								}
							]);
						});
					},
					setCanvasWH: ({ bgObj, type, bgScale }) => {
						// 为动态设置画布宽高的方法，
						this.poster = bgObj;
					}
				});

				this.allqrcodepath = d.poster.tempFilePath;
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
			}
		},

		// 详情发货信息
		goDistribution(dispatchType, orderId, orderItemId) {
			this.jump('/pages/order/distribution', { expressType: dispatchType, orderId: orderId, orderItemId: orderItemId });
		},
		// 订单详情
		getOrderDetail() {
			let that = this;
			that.$api('order.detail', {
				order_sn: that.$Route.query.order_sn
			}).then(res => {
				if (res.code === 1) {
					that.orderDetail = res.data;
					that.orderDetail.createtime = this.$u.timeFormat(res.data.createtime, 'yyy-mm-dd hh:MM');
					that.orderDetail.paytime = this.$u.timeFormat(res.data.paytime, 'yyy-mm-dd hh:MM');
					// 拼接总码
					let arr = [];
					res.data.verify.forEach(item => {
						arr.push(item.code);
					});
					this.qrcode = arr.join(',');
					if (res.data.verify.length) {
						this.shareFc();
					}
				}
			});
		},
		// 复制
		onCopy(code) {
			let that = this;
			uni.setClipboardData({
				data: code,
				success: function(data) {
					//#ifdef H5
					that.$tools.toast('已复制到剪切板');
					//#endif
				},
				fail: function(err) {},
				complete: function(res) {}
			});
		},
		// 取消订单
		onCancel(id) {
			let that = this;
			that.$api('order.cancel', {
				id: id
			}).then(res => {
				if (res.code === 1) {
					that.$Router.back();
				}
			});
		},
		// 立即购买
		onPay(id) {
			uni.navigateTo({
				url: `/pages/order/payment/method?orderId=${id}`
			});
		},
		// 删除订单
		onDelete(orderId) {
			let that = this;
			uni.showModal({
				title: '删除订单',
				content: '确定要删除这个订单么？',
				cancelText: '取消',
				confirmText: '删除',
				success: res => {
					if (res.confirm) {
						that.$api('order.deleteOrder', {
							id: orderId
						}).then(res => {
							if (res.code === 1) {
								that.$Router.back();
							}
						});
					}
				}
			});
		},
		// 待评价
		onComment(orderId, orderItemId) {
			this.jump('/pages/order/add-comment', { orderId: orderId, orderItemId: orderItemId });
		},
		// 确认收货单个
		onConfirm(id, itemId) {
			let that = this;
			uni.showLoading({
				title: '确认中...',
				mask: true
			});
			that.$api('order.confirmItem', {
				id: id,
				order_item_id: itemId
			}).then(res => {
				uni.hideLoading();
				if (res.code === 1) {
					that.getOrderDetail();
				}
			});
		},
		// 确认所有商品
		onAllConfirm(id) {
			let that = this;
			uni.showLoading({
				title: '确认中...',
				mask: true
			});
			that.$api('order.confirmOrder', {
				id: id
			}).then(res => {
				uni.hideLoading();
				if (res.code === 1) {
					that.getOrderDetail();
				}
			});
		},
		// 查看物流
		onExpress(orderId, orderItemId) {
			let that = this;
			that.$api('order.expressList', {
				order_id: orderId
			}).then(res => {
				if (res.code === 1) {
					if (res.data.length == 1) {
						this.jump('/pages/order/express', { orderId: orderId });
					} else {
						this.$tools.toast('暂无包裹~');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
// 二维码
.hideCanvasView {
	position: relative;
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
}
// 到店信息
.storeInfo-wrap {
	background-color: #fff;
	.storeInfo-title {
		height: 80rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	}
	.qr-code-box {
		margin-bottom: 50rpx;
		.code-img-wrap,
		.qr-code-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #fff;
		}
		.qr-code-text {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		.qr-code-tip {
			font-size: 24rpx;
			font-weight: 400;
			color: #c4c4c4;
		}
	}
	.storeInfo-box {
		padding: 20rpx;
		.store-name {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}
		.store-address {
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			width: 510rpx;
			padding-right: 50rpx;
		}
		.store-line {
			width: 1px;
			height: 80rpx;
			background-color: #eee;
		}
		.store-serve {
			flex: 1;
			.cu-btn {
				padding: 0;
				background: none;
			}
			.icon-tianchongxing- {
				color: #f83942;
				font-size: 40rpx;
			}
			.icon-dingwei {
				color: #4fbbff;
				font-size: 40rpx;
			}
		}
	}
}
// 收货人信息
.consignee-wrap {
	background-color: #fff;
	.consignee-title {
		height: 80rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	}
	.content-item {
		font-size: 28rpx;
		height: 60rpx;
		padding-left: 20rpx;
		.item-name {
			color: #999;
		}
		.item-value {
			color: #333;
		}
	}
}

.detail-head {
	background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
	background-size: 100% 180rpx;
	height: 180rpx;

	.state-box {
		padding: 30rpx 40rpx;
		color: rgba(#fff, 0.9);

		.state-img {
			width: 60rpx;
			height: 60rpx;
			// background: #ccc;
			margin-right: 40rpx;
		}
	}
}

// 收货地址
.address-wrap {
	position: relative;
	background-color: #fff;
	min-height: 160rpx;
	width: 100%;
	margin-bottom: 20rpx;
}
.order-address-box {
	width: 710rpx;
	left: 50%;
	transform: translateX(-50%);
	top: -50rpx;
	background-color: #fff;
	min-height: 160rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	position: absolute;
	.address-username {
		margin-right: 20rpx;
	}
	.address-detail {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-top: 20rpx;
	}
}
.detail-goods {
	margin-bottom: 20rpx;
	.order-list {
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 0 20rpx;
		.order-card {
			padding: 20rpx 0;
			.order-price-wrap {
				width: 480rpx;

				.status-btn {
					background: none;
					height: 32rpx;
					border: 1rpx solid $t-mainColor;
					border-radius: 15rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: $t-mainColor;
					padding: 0 10rpx;
					margin-left: 20rpx;
					background: rgba($t-mainColor, 0.16);
				}
				.order-price {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: $t-priceColor;
					&::before {
						content: '￥';
						font-size: 26rpx;
					}
				}
			}
		}
		// 配送方式
		.express-type-box {
			width: 710rpx;
			height: 90rpx;
			background: rgba(247, 247, 247, 1);
			border-radius: 10rpx;
			padding: 0 20rpx;
			.express-type--title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
			.express-type--content {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
			.express-type--detail {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 30rpx;
			}
		}
		.refund_msg {
			font-size: 28rpx;
			color: #999;
			flex: 1;
			text-align: left;
		}
		.order-bottom {
			background: #fff;
			justify-content: flex-end;
			padding: 20rpx 0;
			.btn1 {
				width: 160rpx;
				height: 60rpx;
				border: 1rpx solid rgba(223, 223, 223, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				background: #fff;
				padding: 0;
				margin-right: 20rpx;
			}
			.btn2 {
				width: 160rpx;
				height: 60rpx;
				border: 1rpx solid $t-mainColor !important;
				border-radius: 30rpx;
				font-size: 26rpx;
				color: $t-mainColor !important;
				padding: 0;
				background: #fff;
				margin-right: 20rpx;
			}
		}
	}
}
// 收货信息、订单信息。
.notice-box {
	background: #fff;
	margin-bottom: 20rpx;
	.notice-title {
		height: 80rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		justify-content: space-between; // 左右对齐
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	}
	.notice-box__head {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 80rpx;
		border-bottom: 1rpx solid #dfdfdf;
		padding: 0 25rpx;
	}
	.notice-box__content {
		padding: 25rpx;
		.self-pickup-box {
			width: 100%;
			.self-pickup--img {
				width: 200rpx;
				height: 200rpx;
				margin: 40rpx 0;
			}
		}
	}
	.notice-item--center {
		margin-bottom: 10rpx;
	}
	.notice-item,
	.notice-item--center {
		height: 50rpx;
		align-items: flex-start;
		.title {
			font-size: 28rpx;
			color: #999;
			width: 140rpx;
		}

		.detail {
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}
		.copy-btn {
			width: 100rpx;
			height: 50rpx;
			border-radius: 25rpx;
			padding: 0;
			background: rgba(238, 238, 238, 1);
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}
	.notice-item--center {
		align-items: center;
	}
}

// 订单价格信息
.order-price-box {
	background-color: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
	.notice-item {
		height: 50rpx;
		.title {
			font-size: 28rpx;
			color: #999;
		}

		.detail {
			font-size: 28rpx;
			color: #333;
		}
	}
	.all-rpice-item {
		justify-content: flex-end;
		.all-price {
			font-size: 26rpx;
			color: $t-priceColor;
		}
	}
}

// 订单类型
// 订单类型
.order-type-wrap {
	background-color: #fff;
	// border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	
	
	
	.order-type-title {
		height: 80rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		// 
	}
	.order-type-content {
		padding: 20rpx;
		font-size: 28rpx;
		font-weight: 600; // 加粗
		color: #333;
		text-align: right; // 右对齐
		height: 100rpx;
		
	}
}

.foot_box {
	width: 750rpx;
	min-height: 100rpx;
	background: rgba(255, 255, 255, 1);
	border: 1rpx solid rgba(238, 238, 238, 1);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	.money-box {
		height: 60rpx;
		padding: 0 20rpx;
		.money-title {
			font-size: 26rpx;
			color: #999999;
		}
		.all-price {
			color: #333;
			font-size: 26rpx;
		}
	}
	.btn-box {
		justify-content: flex-end;
		margin-bottom: 20rpx;
		.obtn1 {
			width: 160rpx;
			height: 60rpx;
			background: rgba(238, 238, 238, 1);
			border-radius: 30rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-right: 20rpx;
			padding: 0;
		}
		.obtn2 {
			width: 160rpx;
			height: 60rpx;
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			border-radius: 30rpx;
			margin-right: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
			padding: 0;
		}
	}
}
</style>
